<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo"></div>
    <script>
        Vue.config.productionTip = false;
        /**
         * Object.defineProperty(参数1,参数2,参数3):用于给对象增添属性
         *     特点:新增添的属性只读,且不可枚举,需要做相关高级设置
         *      参数1:要修改的对象名
         *      参数2:要修改的属性名
         *      参数3:配置对象
        */

        let text = '男';

       let person = {
           name:'孙悟空',
           age:25
       }
        Object.defineProperty(person,'gender',{

            // value:'男',//指定属性值

            // //其余的设置
            enumerable:true,    //指定属性是否可以被枚举,默认值为false
            // writable:true,      //指定属性是否可以被修改,默认值为false
            // configurable:true   //指定属性是否可以被删除,默认值为false

            //另一组高级设置
            /**
             * 当读取 person 的 gender 属性时,getter被触发调用,会执行其中的代码,并返回一个值,并将此值作为 gender 的值
            */
            get(){
                return text
            },

            /**
             * 当设置或改变 person 的 gender 属性值时,setter会被触发调用,并接收一个参数,此参数的值为我们改变后的值
            */

            set(val){
                text = val
            }

            //无论 get函数 还是 set函数,其中this都指向vm
        })

        //若不做任何设置,gender无法被遍历出来
        for (const key in person) {
            console.log(key,person[key])
        }

    </script>
</body>

</html>